
<div id="main-wrapper">
	<h1>
		<i class="glyphicon glyphicon-th-list"></i>听众列表
	</h1>
	<table id="table-audience" class="table table-striped">
		<thead>
		<tr>
			<th>昵称</th>
			<th>在线时长</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
			<script type="text/html" id="tr-tmpl">
				<tr>
					<td><%- name %></td>
					<td><%- onlinetime %></td>
					<td>
						<a data-aid="<%- id %>" class="ex-link kickaudi">踢除</a>
					</td>
				</tr>
			</script>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					<script type="text/html" id="pagin-tmpl">
						<ul class="pagination">
							<li>
								<a onclick="updateAudienceList(1)">&laquo;</a>
							</li>
                            <% if (current > 2) { %>
                                <li class="disabled">
                                    <a>..</a>
                                </li>
                            <% } %>
							<% if (prev) { %>
								<li>
									<a onclick="updateAudienceList(<%- prev %>)"><%- prev %></a>
								</li>
							<% } %>
							<li class="active">
								<a onclick="updateAudienceList(<%- current %>)"><%- current %></a>
							</li>
							<% if (next) { %>
								<li>
									<a onclick="updateAudienceList(<%- next %>)"><%- next %></a>
								</li>
							<% } %>
                            <% if (current < (count - 1)) { %>
                                <li class="disabled">
                                    <a>..</a>
                                </li>
                            <% } %>
							<li>
								<a onclick="updateAudienceList(<%- count %>)">&raquo;</a>
							</li>
						</ul>
					</script>
				</td>
			</tr>
		</tfoot>
	</table>
</div>

<script>
	var $tableAudience = $('#table-audience'),
		$tbody = $tableAudience.find('tbody'),
		trTmpl = _.template($tbody.find('#tr-tmpl').html()),
		$paginTmpl = $tableAudience.find('#pagin-tmpl'),
		paginTmpl = _.template($paginTmpl.html());

	updateAudienceList(1);

	$tbody.delegate('a.kickaudi', 'click', function(ev) {
		var $a = $(this),
			aid = parseInt($a.attr('data-aid'));
		$.get('/do/s/kickaudience?aid=' + aid, function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	});

	function updateAudienceList(page) {
		$.get('/do/s/audiencelist', {
            page: page
        }, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],
				audienceList = resObj['audienceList'];
			// records
			if (! audienceList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="3">没有记录</td>',
					'</tr>'
				].join(''));
			}
			$tbody.html(_.reduce(audienceList, function(memo, audience){
				return memo + trTmpl({
					id: audience.id,
					name: audience.name,
					onlinetime: strTime(Date.now() - audience.jointime, true)
				});
			}, ''));
			// pagination
			var count = Math.ceil(total / pageSize);
			$paginTmpl.next().remove();
			$paginTmpl.after(paginTmpl({
				current: page,
				prev: page > 1 ? page - 1 : null,
				next: page < count ? page + 1 : null,
				count: count
			}));
		});
	}
</script>


